<template>
	<view class="clubDetail">
		<view class="bthTurnback" @click="turnBack" :style="`top:${menuButtonInfo.top}px`">
			<van-icon name="arrow-left" size="28" color="black" />
		</view>
		<view class="bgImg">
			<image :src="clanDetailMsg.clubDetailBackground||clanDetailMsg.clubLogo" mode="aspectFill"
				@click="chooseBgImg"></image>
		</view>
		<view class="cover">
			<image :src="clanDetailMsg.clubLogo" mode="aspectFill"></image>
		</view>
		<view class="clubName">{{clanDetailMsg.clubName}}</view>
		<view class="bthApplyIn auditting" v-if="clubIfJoin.statu===0">申请加入审核中</view>
		<view class="bthApplyIn manageClub" v-else-if="clubIfJoin.role==='club_admin'" @click="toManageClub">管理社团>
		</view>
		<view class="bthApplyIn editClub" v-if="clubIfJoin.role==='club_admin'" @click="toEdit">信息编辑>
		</view>
		<view class="bthApplyIn" @click="joinPlz('member')" v-if="clubIfJoin===false">+申请加入</view>
		<view class="bthApplyIn teacher-join" @click="joinPlz('club_teacher')" v-if="clubIfJoin===false">+指导老师加入</view>
		<view class="conCreater"><text>主办人:</text><text>{{clanDetailMsg.founder}}</text></view>
		<view class="conResponser"><text>负责人:</text><text>{{clanDetailMsg.head}}</text></view>
		<view class="intro">
			<view class="title">简介</view>
			<view class="content">
				{{clanDetailMsg.clubIntro}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		joinClub,
		getClubDetail
	} from "@/apis/apis.js"
	import{
		useUserStore
	} from "@/store/index.js"

	const useUser = useUserStore()
	const clubId = ref()
	const clanDetailMsg = ref({})
	const clubIfJoin = ref({})
	const getDetail = async () => {
		const res = await getClubDetail({
			clubId: clubId.value
		})
		console.log(res, 'xxxxxxxxxxxxxxxxxxxxxxxxx');
		if (res.status === 200) {
			clanDetailMsg.value = res.data
			clubIfJoin.value = res.ifJoin
			console.log(clubIfJoin.value, 13214234253)
		}
	}
	onLoad((options) => {
		console.log(options);
		clubId.value = options.clubId;
		// getDetail()
	})
	onShow(()=>{
		getDetail()
	})
	// 申请加入
	const joinPlz = async (identity) => {
		if(identity === 'club_teather') {   
			uni.showModal({
				title: '提示',
				content: `确定 ${useUser.userInf.username} 为你本人的姓名吗?若不是则可能影响您的权限审核过程`,
				success: async (res) => {
					if(res.confirm) {
						await handleJoinRequest(identity)
					}
				}
			})
				} else {
					await handleJoinRequest(identity)
				}
			}
	
		const handleJoinRequest = async (identity) => {
		const res = await joinClub({
			clubId: clubId.value,
			identity: identity
		})
		console.log(res);
		if (res.msg === "申请成功") {
			getDetail()
			uni.showModal({
				showCancel: false,
				content: "申请成功，请通知社团管理员完成审核"
			})
		} else if (res.msg === "已申请") {
			uni.showModal({
				showCancel: false,
				content: "您已经申请过加入该社团了"
			})
		}
	}

	const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
	const turnBack = () => {
		uni.navigateBack({
			delta: 1,
		})
	}
	const toManageClub = () => {
		uni.navigateTo({
			url: `/pages/manageClub/manageClub?clubId=${clanDetailMsg.value.id}`
		})
	}
	const chooseBgImg = () => {
		console.log(2344323443234243)
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				console.log(res.tempFilePaths, 'xxxxxxxxxxxxxx')
				clanDetailMsg.value.clubDetailBackground = res.tempFilePaths[0];
				uni.uploadFile({
					url: 'http://localhost:8080/apis/uploadFiles',
					filePath: clanDetailMsg.value.clubDetailBackground,
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('jyu_token') ||
							useUser
							.token || ''
					},
					name: 'file',
					timeout: 10000,
					success: res => {
						console.log(212121212, res)
						formData.clubLogo = 'http://localhost:8080' + JSON.parse(res.data)
							.filePaths[0]
					},
					fail: err => {
						console.log(err)
					}
				})
			},
			fail: (err) => {
				console.error(err);
			}
		});
	}
	const toEdit=()=>{
		uni.navigateTo({
			url:`/pages/applyClub/applyClub?clubInfo=${JSON.stringify(clanDetailMsg.value)}`
		})
	}
</script>

<style lang="less" scoped>
	.clubDetail {
		position: relative;
		background-color: #f1f1f1;

		.bthTurnback {
			position: fixed;
			left: 10rpx;
		}

		.bgImg {
			height: 500rpx;
			width: 100vw;

			image {
				height: 100%;
				width: 100%;
			}
		}

		.cover {
			height: 220rpx;
			width: 100vw;
			text-align: center;
			margin-top: -110rpx;

			image {
				height: 220rpx;
				width: 220rpx;
				border-radius: 110rpx;
			}
		}

		.clubName {
			height: 80rpx;
			width: 100vw;
			line-height: 80rpx;
			font-size: 35rpx;
			font-weight: 550;
			text-align: center;
		}

		.bthApplyIn {
			height: 60rpx;
			line-height: 60rpx;
			background-color: #07c160;
			border: #07d969 1rpx solid;
			font-weight: 550;
			font-size: 25rpx;
			text-align: center;
			color: #fff;
			padding: 0 15rpx;
			display: inline-block;
			border-radius: 20rpx;
			position: absolute;
			right: 30rpx;
			top: 550rpx;
		}
		
		.teacher-join {
			top: 610rpx;
			margin-top: 10rpx;
			background-color: #4a90e2;
			border-color: #357abd;
		}

		.editClub {
			top: 630rpx;
		}

		.auditting {
			background-color: #fdf6ec;
			border: #f3d19e 1rpx solid;
			color: #e6a23c;
		}

		.manageClub,
		.editClub {
			color: #99c384;
			border: 1rpx #aedf96 solid;
			background-color: #f0f9eb;
		}

		.conCreater,
		.conResponser {
			width: 88%;
			height: 120rpx;
			margin: 20rpx auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			background-color: #fff;
			border-radius: 20rpx;

			text:first-child {
				font-size: 32rpx;
				font-weight: 550;
			}

			text:last-child {
				font-size: 32rpx;
			}
		}

		.intro {
			width: 95%;
			margin: 20rpx auto;
			background-color: #fff;
			border-radius: 20rpx;
			padding-bottom: 30rpx;

			.title {
				font-size: 35rpx;
				font-weight: 550;
				line-height: 70rpx;
				text-align: center;
			}

			.content {
				width: 80%;
				font-size: 30rpx;
				line-height: 40rpx;
				margin: 0 auto;
				text-align: center;
			}
		}
	}
</style>